<template>
  <el-container class="e1-layout">
    <!-- 财务主题顶部栏 -->
    <el-header height="60px" class="e1-header">
      <div class="header-content">
        <div class="brand">
          <img src="@/assets/logo.png"  class="logo">
          <span class="title">财务系统</span>
        </div>
        
        <div class="right-area">
          <div class="time-info">
            日期:{{ currentDate }}&nbsp;&nbsp; 时间:{{ currentTime }}
          </div>
          <div class="divider"></div>
          <div class="greeting">
            你好，{{ user.name  }}
          </div>
        </div>
      </div>
    </el-header>
 
    <el-container>
      <!-- 财务侧边栏 -->
      <el-aside width="160px" class="e1-sidebar" :resize-observer="false">
        <el-menu 
          :default-active="$route.path"     
          router 
          class="e1-menu"
        >
          <el-menu-item index="/e1/report">
            <el-icon><DataAnalysis /></el-icon>
            <span>财务报表</span>
          </el-menu-item>
 
          <el-menu-item index="/e1/orders">
            <el-icon><Money /></el-icon>
            <span>订单记录</span>
          </el-menu-item>
          
          <el-menu-item index="/e1/profile">
            <el-icon><User /></el-icon>
            <span>账户设置</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
 
      <!-- 内容区 -->
      <el-main class="e1-main">
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>
 
<script>
import { ref, onMounted, onBeforeUnmount, computed, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { 
  Money, 
  DataAnalysis,
  User 
} from '@element-plus/icons-vue'
import { debounce } from 'lodash-es'
import authStore from "@/model/authstore";
import logo from '@/assets/logo.png'  
import { useDateTime } from '@/utils/timeUtils/DateTime'
import { ElMessage } from 'element-plus';
 
export default {
  name: 'E1Layout',
  components: { Money, DataAnalysis, User },
  setup() {
    const route = useRoute()
    const router = useRouter()

    const { currentDate, currentTime } = useDateTime({})

    const user = computed(() => {
      const authData = authStore.get('auth')  || {}
      return {
        name: authData.user?.name, 
        image: authData.user?.image  || logo,
        permission: authData.user?.permission  ?? 0,
        status: authData.user?.status  ?? 1 
      }
    })
 
    const handleResize = debounce(() => {
      console.log(' 财务系统布局调整')
    }, 300)
 
   
 
    const checkPermission = () => {
      if (user.value.permission  < 1) { // 财务系统需要至少财务权限(1)
        console.warn(' 权限不足，当前权限:', user.value.permission)  
        router.push('/unauthorized')  
      }
    }
 
    onMounted(() => {
      if (!authStore.isAuthenticated) {
        router.replace('Cloign ')
        ElMessage.error("请登录，您本次非法行为将记录在案")
        return;
      }
      
      onBeforeUnmount(() => {
        window.removeEventListener('resize',  handleResize)
      })
    })
 
    watch(
      () => route.path,  
      (newPath) => {
        console.log(' 路由变化:', newPath)
        checkPermission()
      }
    )
 
    return { 
      user, 
      currentDate,
      currentTime 
    }
  }
}
</script>
 
<style scoped lang="scss">
.e1-layout {
  --primary-color:#676767c3;
  --secondary-color:#e59833cc;
  --bg-color: #f0f7ff;
  --text-dark: #2c3e50;
  height: 100vh;
  overflow: hidden;
}
 
.e1-header {
  background: linear-gradient(135deg, var(--primary-color) 60%, var(--secondary-color) 90%);
  color:  rgb(51, 51, 51);
  box-shadow: 0 2px 10px rgba(26, 75, 140, 0.3);
  
  .header-content {
    display: flex;
    height: 100%;
    align-items: center;
    
    .brand {
      display: flex;
      align-items: center;
      margin-right: 30px;
      
      .logo {
        width: 28px;
        height: 28px;
        filter: brightness(0) invert(1);
      }
      
      .title {
        font-weight: 600;
        margin-left: 8px;
        letter-spacing: 1px;
      }
    }
    
    .right-area {
      display: flex;
      align-items: center;
      margin-left: auto;
      color: rgba(255,255,255,0.9);
      font-size: 14px;
      
      .time-info {
        color: inherit;
      }
      
      .divider {
        height: 16px;
        width: 1px;
        background-color: rgba(255,255,255,0.5);
        margin: 0 12px;
      }
      
      .greeting {
        font-weight: 500;
        color: inherit;
      }
    }
  }
}
 
.e1-sidebar {
  background: white;
  box-shadow: 1px 0 1px rgba(0, 0, 0, 0.1);
  z-index: 1;
  
  .e1-menu {
    border-right: none;
    
    :deep(.el-menu-item) {
      height: 46px;
      margin: 0px 0;
      transition: all 0.3s;
      
      &:hover {
        background: rgba(215, 215, 215, 0.9);
      }
      
      &.is-active {
        background-color: #afb9c3;
        border-right: 3px solid var(--primary-color);
        color: #ffffff;
        
        .el-icon {
          color: inherit;
        }
      }
    }
  }
}
 
.e1-main {
  background: var(--bg-color);
  padding: 20px;
}
 
@media (max-width: 548px) {
  .e1-header {
    .header-content {
      padding: 0 15px;
      
      .brand .title {
        display: none;
      }
      
      .right-area {
        .greeting {
          display: none;
        }
        .divider {
          margin: 0 8px;
        }
      }
    }
  }
  
  .e1-sidebar {
    width: 64px !important;
    
    :deep(.el-menu-item) {
      span {
        display: none;
      }
    }
  }
}
</style>